<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./sougou.css">
</head>

<body>
    <div class="sougou">
        <form action="https://www.sogou.com/tx?hdq=sogou-wsse-3f7bcd0b3ea82268">
            <li id="search">
                <span>网页</span>
                <ul>
                    <li _action='https://www.sogou.com/tx?hdq=sogou-wsse-3f7bcd0b3ea82268'>网页</li>
                    <li _action='http://pic.sogou.com/pics?p=17040500'>图片</li>
                    <li _action='http://v.sogou.com/v?p=17040600'>视频</li>
                    <li _action='http://mp3.sogou.com/music.so?p=17040200'>音乐</li>
                </ul>
            </li>
            <li>
                <input type="text" name="query">
            </li>
            <li>
                <input type="submit" value="搜狗搜索">
            </li>
        </form>
        <script type="text/javascript">
            $(function() {
                $("#search>ul>li").on("mouseenter", function() {
                    // 选中的加上样式  其他的去除样式
                    $(this).addClass("active").siblings().removeClass("active");
                })
                $("#search>ul>li").on("click", function() {
                    let text = $(this).text(); //得到文本
                    // console.log(text);
                    // parent()直接父级    prev()同级的上一个
                    // $(this).parent().prev().text(text); //到span
                    $(this).parent().hide().prev().text(text); //到span，设置span中的内容跟
                    // 获得对应的链接   attr()获取，设置【自定义】属性
                    let action = $(this).attr("_action"); //获取属性
                    // console.log(action);
                    $("form").attr("action", action); //设置form属性action值
                })
                $("#search").hover(function() {
                    $(this).find("ul").show();
                    let span = $(this).find("span").text(); //当前选中的span的内容
                    // console.log($("#search>ul>li"));  //4个li
                    // each()一个一个遍历li
                    $("#search>ul>li").each(function() {
                        // 如果循环的li里面的内容，和span里面的内容是否相同，则加上样式
                        // $(this).text()  ul下li的文本内容
                        if ($(this).text() == span) {
                            $(this).addClass("active");
                        } else {
                            $(this).removeClass("active"); //不相同则去除样式
                        }
                    })
                }, function() {
                    $(this).find("ul").hide();
                })
            })
        </script>
    </div>
</body>

</html>